<template>
  <div class="chart3" ref="chart" style="width: 100%; height: 400px"></div>
</template>

<script>
export default {
  methods: {
    getEcharts() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
            backgroundColor:"",
          tooltip: {},
            title:{
                text:'支出',
                // top:'7%',
                // left:'10%',
                textStyle:{
                    color:'#fff'
                }
            },
          radar: {
            radius: "70%", //大小
            nameGap: 1, // 图中工艺等字距离图的距离
            center: ["50%", "60%"], // 图的位置，
            shape: 'circle',
            name: {
              textStyle: {
                color: "rgba(101, 213, 255, 1)",
                fontSize: 16
              },
              formatter: function(name) {
              return name;
              }
            },
            indicator: [
              {"name":'销售',"max":"100"},
              {"name":'信息技术',"max":"100"},
              {"name":'宣传',"max":"100"},
              {"name":'发展',"max":"100"},
              {"name":'客户支持',"max":"100"},
              {"name":'其他',"max":"100"},
              
              ],
            axisLine: {
              lineStyle: {
               
                color: "rgba(153, 209, 246, 0.2)"
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: "rgba(255,0,0,0)" // 图表背景的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色
              }
            }
          },
          legend:{
            show:true,
            top:'10%',
            textStyle:{
              color:'#ccc'
            }
          },
          series: [
            {
              name: "预计拨款",
              type: "radar",
              symbol: "angle",
              smooth: true,
              itemStyle: {
                normal: {
                  areaStyle: { type: "default" }
                }
              },
              data: [
                {
                  name:'预计拨款',
                  symbol: "circle",
                  symbolSize: 5,
                  value: [50,80,70,84,45,34],
                  areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
                  itemStyle: {
                    normal: {
                      borderWidth:1,
                      color: "RGBA(0, 34, 66, 1)",
                      borderColor: "rgba(146, 225, 255, 1)"
                    }
                  },
                  lineStyle: {
                    color: "rgba(146, 225, 255, 1)",
                    width: 1
                  },
                  textStyle:{
                    color:'#fff'
                  }
                }
              ]
            },
            {
              name: "实际支出",
              type: "radar",
              symbol: "angle",
              smooth: true,
              itemStyle: {
                normal: {
                  areaStyle: { type: "default" }
                }
              },
              data: [
                {
                  name:'实际支出',
                  symbol: "circle",
                  symbolSize: 5,
                  value: [64,95,46,94,40,58],
                  areaStyle: { color: "rgba(145, 204, 117,.2)" },
                  itemStyle: {
                    normal: {
                      borderWidth:1,
                      color: "RGBA(145, 204, 117)",
                      borderColor: "rgba(145, 204, 117)"
                    }
                  },
                  lineStyle: {
                    color: "rgba(145, 204, 117)",
                    width: 1
                  }
                }
              ]
            }
          ]
          
        }
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    },
    autoResize() {
      this.$echarts.init(this.$refs.chart).resize();
    },
  },
  mounted(){
    this.getEcharts()
  }
};
</script>

<style></style>
